<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <style>
        html {
            font-size: 16px; /* 默认字体大小 */
        }
        @media (max-width: 768px) {
            html {
                font-size: 14px; /* 小屏幕设备字体大小 */
            }
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            font-size: 1rem; /* 使用rem单位 */
        }
        header {
            background-color: white;
            padding: 0.625rem 1.25rem; /* 使用rem单位 */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        /*头部*/
        .header .header-height {
            width: 10rem;
            height: 3.47rem;
            background: #FFFFFF;
        }

        .header .header-wrap {
            position: fixed;
            z-index: 9;
            top: 0;
            left: 0;
            width: 100%;
            height: 3.47rem;
            background-color: #FFFFFF;
        }

        .header .header-wrap .header-content {
            width: 10rem;
            height: 3.47rem;
            position: relative;
            display: flex;
            justify-content: center;
            line-height: 3.47rem;
            background-color: rgba(255, 255, 255, 1);
            color: #000000;
        }

        .header .header-wrap .header-content .left a{
            display: flex;
            align-content: center;
        }

        .header .header-wrap .header-content .left a img {
            width: 1.735rem;
            height: 1.735rem;
            cursor: pointer;
        }

        .header .header-wrap .header-content .left {
            position: absolute;
            left: 1rem;
            top: 0;
            height: 3.47rem;
            display: flex;
            align-items: center;
        }

        .header .header-wrap .header-content .left .text{
            font-size: 1.38rem;
            margin-left: .5rem;
        }
        /*头部*/

        main{
            padding-bottom: 1.25rem;
        }
        .order-status-tabs {
            display: flex;
            position: sticky; /* 添加吸顶效果 */
            top: 3.47rem; /* 吸顶位置 */
            background-color: white; /* 吸顶时背景颜色 */
            padding: 0.625rem 1.25rem; /* 吸顶时内边距 */
            z-index: 1; /* 确保吸顶时在其他内容之上 */
        }
        .order-status-tabs a {
            flex: 1;
            text-align: center;
            text-decoration: none;
            color: #333;
            padding: 0.3125rem 0; /* 使用rem单位 */
            border-bottom: 0.125rem solid transparent; /* 使用rem单位 */
        }
        .order-status-tabs a.active {
            border-bottom-color: #3467F8;
            color: #3467F8;
        }
        .order-item {
            background-color: white;
            padding: 1.25rem; /* 使用rem单位 */
            border-radius: 0.3125rem; /* 使用rem单位 */
            margin: 1.25rem 1.25rem 0;
        }
        .order-item img {
            width: 7.25rem; /* 使用rem单位 */
            height: auto;
            margin-right: 0.625rem; /* 使用rem单位 */
            border-radius: 0.75rem;
        }
        .order-item .btn{
            text-align: right;
        }
        .order-item .product-info {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e1e1e1;
        }
        .order-item .product-name {
            font-size: 1rem; /* 使用rem单位 */
            font-weight: 600;
        }
        .order-item .product-evaluate{
            font-weight: 300;
        }
        .order-item .product-info >div {
            flex: 1;
        }
        .order-item .price {
            color: #d74747;
            font-size: 1rem; /* 使用rem单位 */
        }
        .order-item .quantity {
            float: right;
            font-size: 0.875rem; /* 使用rem单位 */
        }
        .order-item .total-price {
            margin-top: 0.625rem; /* 使用rem单位 */
            font-size: 1rem; /* 使用rem单位 */
        }
        .order-item .action-btn {
            background-color: #3467F8;
            color: white;
            padding: 0.4rem 1rem; /* 使用rem单位 */
            border: none;
            border-radius: 0.3rem; /* 使用rem单位 */
            cursor: pointer;
            font-size: 0.875rem; /* 使用rem单位 */
        }
        .order-item .product-info .product-flex{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-height"></div>
    <div class="header-wrap">
        <div class="header-content">
            <div class="left">
                <a href="/index/user/index.html"><img src="/static/images/go-back.png" alt=""></a>
                <div class="text">个人资料</div>
            </div>
            <div class="title"></div>
        </div>
    </div>
</div>
<main>
    <div class="order-status-tabs">
        <a href="#" class="active">全部</a>
        <a href="#">待发货</a>
        <a href="#">待收货</a>
        <a href="#">待评价</a>
        <a href="#">已完成</a>
    </div>
    <section class="order-item">
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="家迈 330ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">家迈</p>
                    <p class="product-evaluate">待评价</p>
                </div>
                <p class="product-name">330ml</p>
                <div class="product-flex">
                    <p class="price">¥399.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <p class="total-price">共1件，实付：<span class="price">¥399.00</span></p>
        <div class="btn">
            <button class="action-btn">评价</button>
        </div>
    </section>
    <section class="order-item">
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="茅台 500ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">茅台</p>
                    <p class="product-evaluate">待收货</p>
                </div>
                <p class="product-name">500ml</p>
                <div class="product-flex">
                    <p class="price">¥4000.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="茅台 500ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">茅台</p>
                    <p class="product-evaluate">待收货</p>
                </div>
                <p class="product-name">500ml</p>
                <div class="product-flex">
                    <p class="price">¥4000.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <p class="total-price">共2件，实付：<span class="price">¥4299.00</span></p>
        <div class="btn">
            <button class="action-btn">确认收货</button>
        </div>
    </section>
    <section class="order-item">
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="茅台 500ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">茅台</p>
                    <p class="product-evaluate">待发货</p>
                </div>
                <p class="product-name">500ml</p>
                <div class="product-flex">
                    <p class="price">¥4000.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <p class="total-price">共2件，实付：<span class="price">¥4299.00</span></p>
        <div class="btn">
            <button class="action-btn">确认收货</button>
        </div>
    </section>
    <section class="order-item">
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="茅台 500ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">茅台</p>
                    <p class="product-evaluate">待评价</p>
                </div>
                <p class="product-name">500ml</p>
                <div class="product-flex">
                    <p class="price">¥4000.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <p class="total-price">共2件，实付：<span class="price">¥4299.00</span></p>
        <div class="btn">
            <button class="action-btn">确认收货</button>
        </div>
    </section>
    <section class="order-item">
        <div class="product-info">
            <img src="https://placehold.co/100x100" alt="茅台 500ml">
            <div class="product-top">
                <div class="product-flex">
                    <p class="product-name">茅台</p>
                    <p class="product-evaluate">待评价</p>
                </div>
                <p class="product-name">500ml</p>
                <div class="product-flex">
                    <p class="price">¥4000.00</p>
                    <p class="quantity">x1</p>
                </div>
            </div>
        </div>
        <p class="total-price">共2件，实付：<span class="price">¥4299.00</span></p>
        <div class="btn">
            <button class="action-btn">确认收货</button>
        </div>
    </section>
</main>

<script>
    document.querySelectorAll('.action-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            alert('Button clicked!');
        });
    });
</script>
</body>
</html>
